<template>
  <div class="app-container">
    <div class="Main">
      <el-card class="MainCard" shadow="always" :body-style="{ padding: '0' }">
        <!-- card body -->
        <div class="MainCardDiv">
          <div class="MainCardLeft">
            <h1 class="MainCardLeftH1">部门资料</h1>
            <div class="MainCardDivMain">
              <el-tree :data="data" node-key="所有数据" :props="defaultProps" @node-click="handleNodeClick" />
            </div>
          </div>
          <div class="MainCardRight">
            <div class="MainCardRightTop">
              <h1 class="MainCardRightH1">新增部门</h1>

              <el-form-item label="部门代码" style="font-size: 9px; height: 15px; margin-bottom: 35px">
                <el-input placeholder="请输入部门代码" style="width: 180px; height: 30px" />
              </el-form-item>

              <el-form-item label="部门名称" style="font-size: 9px; height: 15px; margin-bottom: 35px">
                <el-input placeholder="请输入部门名称" style="width: 180px; height: 30px" />
              </el-form-item>

              <el-form-item label="部门类型" style="font-size: 9px; width: 100px; height: 30px; margin-bottom: 35px">
                <el-select placeholder="生产部门"> </el-select>
              </el-form-item>

              <el-form-item label="核算类型" style="font-size: 9px; width: 100px; height: 30px; margin-top: -15px">
                <el-select style="width: 200px !important; height: 25px" placeholder="非成本核算部门"> </el-select>
              </el-form-item>
              <div style="width: 63%; display: flex; justify-content: space-between">
                <el-button style="background-color: #f89027; width: 60px" type="warning" size="small">新增</el-button>
                <el-button style="background-color: #f89027; width: 60px" type="warning" size="small">删除</el-button>
              </div>
            </div>
            <div class="MainCardRightBottom">
              <h1 class="MainCardRightH1">部门资料</h1>

              <el-form-item label="部门代码" style="font-size: 9px; height: 15px; margin-bottom: 35px">
                <el-input v-model="DepartmentalDat" placeholder="请输入部门代码" style="width: 180px; height: 30px" />
              </el-form-item>

              <el-form-item label="部门名称" style="font-size: 9px; height: 15px; margin-bottom: 35px">
                <el-input v-model="DepartmentCode" placeholder="请输入部门名称" style="width: 180px; height: 30px" />
              </el-form-item>

              <el-form-item label="部门类型" style="font-size: 9px; width: 100px; height: 30px; margin-bottom: 35px">
                <el-select v-model="department" placeholder="生产部门">
                  <el-option v-for="item in DepartmentType" :key="item.id" :label="item.name" :value="item.name" />
                </el-select>
              </el-form-item>

              <el-form-item label="核算类型" style="font-size: 9px; width: 100px; height: 30px; margin-top: -15px">
                <el-select v-model="businessAccounting" style="width: 200px !important; height: 25px" placeholder="非成本核算部门">
                  <el-option v-for="item in AccountingType" :key="item.id" :label="item.name" :value="item.name" />
                </el-select>
              </el-form-item>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'DepartmentalDataOLlKt'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { ref, onMounted } from 'vue'

import { AllDepartmentData, type AllDepartments } from '@/api/GeneralManager/SystemManagement/DepartmentInformation'

//获取所有部门资料
onMounted(() => {
  DepartmentalData()
})

const DepartmentalData = async () => {
  try {
    let resolve = await AllDepartmentData()
    data.value = resolve
  } catch (error) {}
}

interface Tree {
  label: string
  children?: Tree[]
  deptName?: string
  deptNo?: string
  deptFlag?: string
  totalFlag?: string
}

const data = ref<AllDepartments[]>([])

// 部门代码
const DepartmentCode = ref<string>('')

// 部门资料
const DepartmentalDat = ref<string>('')

// 定义结构
interface Department {
  id: string
  name: string
}

// 部门类型
const DepartmentType = ref<Department[]>([
  { id: 'P', name: '生产部门' },
  { id: 'M', name: '幕僚部门' }
])

// 核算类型
const AccountingType = ref<Department[]>([
  { id: 'Y', name: '成本核算部门' },
  { id: 'N', name: '非成本核算部门' }
])

const handleNodeClick = (data: Tree) => {
  // 解构代码和资料
  let { deptName, deptNo, deptFlag, totalFlag } = data

  DepartmentCode.value = deptName!
  DepartmentalDat.value = deptNo!

  let departmentName = findNameById(DepartmentType.value, deptFlag!)
  department.value = departmentName

  let accountingName = findNameById(AccountingType.value, totalFlag!)
  businessAccounting.value = accountingName
}

// 根据 id 在数组中查找对应的名称
const findNameById = (array: { id: string; name: string }[], id: string) => {
  let item = array.find((item) => item.id === id)
  return item ? item.name : ''
}

// 生产
const defaultProps = {
  children: 'childDepartment',
  label: 'deptName'
}

// 收集部门类型数据
const department = ref<string>('')

// 收集核算部门数据类型
const businessAccounting = ref<string>('')
</script>

<style lang="less" scoped>
// 主体
.Main {
  width: 100%;
  height: 800px;
}

.MainCard {
  width: 100%;
  height: 100%;
  box-shadow: none;
}

.MainCardDiv {
  width: 50%;
  height: 800px;
  display: flex;

  .MainCardLeft {
    width: 50%;
    height: 100%;
  }

  .MainCardRight {
    width: 48%;
    height: 100%;
    margin-left: 50px;
    margin-top: 15px;
  }
}

.MainCardLeftH1 {
  font-size: 16px;
  margin-top: 15px;
  margin-left: 10px;
  margin-bottom: 15px;
}

.MainCardDivMain {
  width: 100%;
  height: 92%;
  border: 1px solid #e6e6e6;
  margin-left: 10px;
}

:deep(.el-tree-node:focus > .el-tree-node__content) {
  color: #f89027;
}

:deep(.el-tree-node__content:hover) {
  color: #f89027;
}

:deep(.is-expanded > .el-tree-node__content > .el-tree-node__expand-icon) {
  color: red !important;
}

.MainCardRightTop {
  height: 47%;
  width: 100%;
  padding-top: 80px;
}

.MainCardRightBottom {
  height: 40%;
  width: 100%;
}

.MainCardRightH1 {
  font-size: 16px;
  margin-bottom: 30px;
}

:deep(.el-select .el-input__wrapper) {
  width: 180px;
}
</style>
